<template>
  <x-breadcrumb :content-list="breadcrumbContentList"></x-breadcrumb> <!-- 面包屑导航 -->

  <el-card class="box-card mt-3">
    <div class="row border-1">
      <div class="col-3 d-flex">
        <x-search-input v-model="inputVal"></x-search-input>
      </div>
      <div class="col-1">
        <router-link to="/goods/add"><el-button type="primary">添加商品</el-button></router-link>
      </div>
    </div>
    <el-table
      v-if="productList.goods"
     :data="productList.goods"
     :cell-style="{ textAlign: 'center' }"
     :header-cell-style="{ textAlign: 'center' }"
     class="my-3"
     stripe
     border
    >
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="500"></el-table-column>
      <el-table-column prop="goods_price" label="商品价格"></el-table-column>
      <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
      <el-table-column prop="add_time" label="创建时间" :formatter="dateFormat"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click.prevent="handleEdit(scope.row)"
            type="primary"
          >
              <i class="el-icon-edit"></i>
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click.prevent="handleDelete(scope.row)"
          >
              <i class="el-icon-delete"></i>
            </el-button>
        </template>
      </el-table-column>
    </el-table>
      <x-pagination :dispatch-name="'productList/getProductList'" :total="total"></x-pagination>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import XBreadcrumb, { contentType } from '@/components/public-components/XBreadcrumb.vue'
import XSearchInput from '@/components/public-components/XSearchInput.vue'
import XPagination from '@/components/public-components/XPagination.vue'
import { useRouter } from 'vue-router'
import { productListInit, editAndDeleteEvents } from './productListEventsAndParams'
import { dateFormat } from '@/utils/NewDate'

const breadcrumbContentList: contentType[] = ['首页', '商品管理', '商品列表']

export default defineComponent({
  name: 'HomeProductList',
  components: {
    XBreadcrumb,
    XSearchInput,
    XPagination
  },
  setup () {
    const router = useRouter()
    const inputVal = ref('')

    const { total, productList } = productListInit()

    const { handleEdit, handleDelete } = editAndDeleteEvents(router)

    return { inputVal, productList, dateFormat, breadcrumbContentList, handleEdit,handleDelete, total  }
  }
})
</script>
